<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String basepath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ request.getContextPath() + "/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<style type="text/css">
.qh_right{
	margin-top:20px;
}
.qh_right>div{
	border-radius: 5px;
	padding:5px 0px 5px 10px;

	background: #fafafa;
	border: 1px solid #ebebeb;
	margin-bottom: 15px;
}
.qh_right>div>span{
	padding:2px 7px;
	background: #b2d771;
	border-radius: 30px;
}
.qh_right>div>div{
	
	margin-right: 10px;
}
.qh_right>div>div img{
	float: right;
	padding: 10px 20px 5px 5px;
}
.fenlei>ul{
	float:left;
	border: 1px solid #c3c3c5;
}
.fenlei>ul>li{
	cursor: pointer;
	padding:3px 10px;
	float: left;
	list-style: none;
}
.fenlei>ul .leixing{
	background: #c3c3c5;
	border:1px solid #c3c3c5;
	margin-right: 10px;
	font-size: 12px;
}
.bg_change{
	background-color:#90c624;
}
</style>
<div class="body_top">
	<div>
		<p>审批场地</p>
		<div>
			<p>VENUE FOR EXAMINATION ADD APPROVAL OF</p>
			<p class="last_p">NEVER SO KIND</p>
		</div>
	</div>
</div>
<div class="fenlei clearfix">
    <ul id="ground_type">
		<li>类型：</li>
		<c:forEach items="${requestScope.field }" var="field">
		<li class="leixing" title="${field.ft_id}">${field.ft_name }</li>
		</c:forEach>
	</ul>
	<ul id="pass_data">
		<li >审核状态：</li>
		<li class="leixing" title="0">未审核</li>
		<li class="leixing" title="1">审核通过</li>
		<li class="leixing" title="2" >审核不通过</li>
	</ul>
</div>
<div class="aaa" >
    <div id="each_div">
	<c:forEach items="${requestScope.cdlist }" var="list">
	<div class="qh_right">
		<div>
			<div>
				<p>
					主题:[${list.get(0).f_peoper }]类型:[${list.get(1).ft_name }]<img src="img/ss.png">
				</p>
				<p>
					<span>申请时间：</span>${list.get(0).f_asktime }
				</p><p>
					<span>开始使用时间：</span>${list.get(0).f_stardate }
				</p><p>
					<span>结束时间：</span>${list.get(0).f_startime }
				</p>
				<p>
					<span>申办单位/公司/团队：</span><a href="${list.get(0).f_id }">${list.get(0).f_user }</a>
				</p>
				<p>
					<span>状态：</span>
					<c:choose>
						<c:when test="${list.get(0).f_status == 0}">未审核</c:when>
						<c:when test="${list.get(0).f_status == 1}">审核通过</c:when>
						<c:when test="${list.get(0).f_status == 2}">审核不通过</c:when>
					</c:choose>
				</p>
				<c:if test="${list.get(0).f_status !=0 }"><p><span>审核意见：</span>${list.get(0).f_remarks }</p></c:if>
			</div>
		</div>
	</div>
	</c:forEach>
    </div>
<div class="fy" title="${sum != null?sum:1 }">
	<span id="pre_page">上一页</span>
		<ul>
		</ul>
	<span id="next_page">下一页</span>
</div>
 <script type="text/javascript">
$(document).ready(function(){
	$(".qh_right>div>div img").parent().siblings().css("display","none");
    $(".qh_right>div>div img").click(function(){
		$(this).parent().siblings().slideToggle();
	});
    
    	
    	var kind="cdyy";
    	var type=undefined;
    	var status=undefined;
    	/*  var sum =$("div.fy").attr("title"); */
    	var sum = 20;
    	var connect_page=0;
    	printList(1);
    	//类型选择
    	$("li.leixing").click(function(){
    		$(this).attr("class","bg_change");
    		$(this).siblings().attr("class","");
    		type=$("#ground_type>li.bg_change").attr("title");
    		status=$("#pass_data>li.bg_change").attr("title");
    		 $("div.fy>ul>li").eq(0).trigger("click");
    	})
    		// 分页及动态写数据	  admin/fenye?html=teac&&type=?&&page=?

    		 
    		   function printList(index){
    		     var fy_html="";
    		     var show = sum-index>7?8:sum-index+1;
    		     if(index<=connect_page){
    		         for(var i=8;i>0;i--){
    		             fy_html+="<li>"+(index-i+1)+"</li>";
    		         }
    		         $(".fy>ul").html(fy_html);
    		         $(".fy>ul>li").eq(7).addClass('fy_on');
    		     }else{
    		         for(var i=0;i<show;i++){
    		             fy_html+="<li>"+(index+i)+"</li>";
    		         }
    		         $(".fy>ul").html(fy_html);
    		         $(".fy>ul>li").eq(0).addClass('fy_on');
    		     }
    		     connect_page=index;
    		 }
    			    //点击分页  分别触发ajax事件以及分页列表事件
    			    $(".fy>ul").delegate('li','click',function(){
    			       
    			        $(this).addClass('fy_on');
    			        $(this).siblings("li").attr("class","");
    			        var page = $(this).html();
    			        if(sum>8&&(page%7==1)&&page>7){
    			            printList(Number(page));
    			            }else{
    			                connect_page=page;
    			            }
    			            connect_data(kind,page,type,status);
    			            
    			        })
    			        
    			     // 上一页  and 下一页
    			$("#pre_page").click(function(){
    		     var pre_page=(connect_page-1)%7;
    		     pre_page= pre_page==0?7:pre_page;
    		     $("div.fy>ul>li").eq(pre_page-1).trigger("click");
    		 });
    		 
    		  $("#next_page").click(function(){
    		     var next_page=(Number(connect_page)+1)%7;
    		      next_page= next_page==0?7:next_page ;
    		      next_page= next_page==1?8:next_page ;
    		     $("div.fy>ul>li").eq(next_page-1).trigger("click");
    		 }) 
    		 
    			//拼接ajax地址
    		 function connect_data(kind,page,type,status){
    		     type= (type == undefined?"":"&&type="+type);
    		     status= (status == undefined?"":"&&status="+status);
    		     var address ="admin/fenye?html="+kind+type+status+"&&page="+page;
    		     getData(address,printData);
    		 }
     // ajax传值取相应数据
     function getData(address,callback){
         $.ajax({
             type:"post",
             url:address,
             dataType:"json",
             success:function(data){
                 callback(data);
             },
             error:function(e){
                 console.log(e.message);
             }
         });
     }
    	        
    	//回调函数渲染页面
    	function printData(data,that){
    		var cdyy_html="";
    		$.each(data.paging,function(){
    			var that=this.list;
    			cdyy_html+= "  <div class=\"qh_right\"><div><div><p>主题:"+that[1].ft_explain+"类型:"+that[1].ft_name+"<img src=\"img/ss.png\"></p><p><span>申请时间：</span>"+that[0].f_ask_time+"</p><p><span>开始使用时间：</span>"+that[0].f_stardate+"</p><p><span>结束时间：</span>"+that[0].f_startime+"</p><p><span>申办单位/公司/团队：</span><a href=\""+that[0].f_id+"\">"+that[0].f_user+"</a></p><p><span>状态：</span></div></div></div>";
    		});
    		$("#each_div").html(cdyy_html);
    	}
   
})
</script>
